<template>
	<view class="cases-page">
		<hs-status-bar></hs-status-bar>
		<top-bar :haveBack="shareId==''" :haveBackIndex="shareId!=''"></top-bar>
		<view class="material-content">
			<view class="phone-model">
				<text class="title">机型：</text>
				<view class="phone-select">
					<hs-selectPhoneModel style="display: inline-block;position:relative;"
						@selectModel="selectModel"><text class="text1">▼</text></hs-selectPhoneModel>

				</view>
			</view>
			<view class="material-name" @click="materialListShow = !materialListShow">
				<image :src="materialList[activeMaterialIndex].baseImageUrl" mode="aspectFit"></image>
				<image :src="materialList[activeMaterialIndex].frameImageUrl" mode="aspectFit"></image>
				<text>{{materialList[activeMaterialIndex].name}}</text>
				<text class="text1">▼</text>
			</view>
			<view class="material-list" v-if="materialListShow == true">
				<view class="" @click="materialListShow = false"
					style="height: 100vh;width: 100vw;position: absolute;top: 0;left: 0;">

				</view>
				<scroll-view scroll-x="true" class="material-scroll" enable-flex>
					<view class="material-item" v-for="(item,index) of materialList" :key="item.id"
						:class="{active:activeMaterialIndex==index}">
						<radio checked class="radio" v-if="activeMaterialIndex==index" />
						<view class="image" @click="selectMaterial(item,index)">
							<image :src="item.baseImageUrl" mode="aspectFit"></image>
							<image :src="item.frameImageUrl" mode="aspectFit">
						</view>

						</image>
						<view class="title">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<swiper :duration="500" class="list-swiper" vertical next-margin="150rpx" @animationfinish="getList"
			@touchstart="touchstart" @touchend="touchend" @change="swiperChange" :current="current"
			:class="{animate:shareTips}">
			<swiper-item v-for="(item,index) of list" :key="item.id" :item-id="item.id">
				<view class="list-swiper-item">
					<swiper :duration="500" class="img-swiper" indicator-dots>
						<swiper-item v-for="(i,index) of item.detailList" :key="i.id"
							@click="previewImage(index,item.detailList)">
							<view class="bg" v-if="index==0"
								:style="{background: `url(${i.imageUrl})`,backgroundPosition: 'center',backgroundSize: 'cover'}">
							</view>
							<image :src="i.imageUrl" mode="aspectFit" class="img-swiper-item"></image>
						</swiper-item>
					</swiper>
					<view class="to-custom" @click="handleCustom(item)">
						立即定制
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-tips" v-if="shareId&&shareTips">
			下划查看更多案例 ↓
		</view>
		<view class="">
			<u-popup :show="showUserImage" :round="17" @close="handleClose()" closeable closeOnClickOverlay
				safeAreaInsetTop activeColor="#333333" class="delivery-steps">
				<view class="upload" v-if="listType!=3">
					<view class="upload-img" v-if="historyImages.length==0" @click="addUserImage">
						+<br>{{listType==1?'请上传人像照片':'请上传图片'}}
					</view>
					<image-swiper :list="historyImages" @change="changeImages" :showDelete="true" v-else
						@delete="deleteUserImage" ref="imageSwiper"></image-swiper>
					<image src="@/static/images/icon/img.png" mode="aspectFit" class="upload-img2" @click="addUserImage"
						v-if="historyImages.length>0"></image>
					<view class="left">
						<image class="icon" src="@/static/images/icon/vector.png" mode="aspectFit"></image>
					</view>
					<view class="right">
						<image class="icon" src="@/static/images/icon/vector.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="upload" v-if="listType==3">
					<view class="tabs">
						<view class="tab" :class="{active:inputType==1}" @click="inputType=1">
							输入
						</view>
						<view class="tab" :class="{active:inputType==2}" @click="inputType=2">
							手写
						</view>
					</view>
					<view v-show="inputType==1">
						<view class="preview" :style="{fontFamily:activeFontFamily}">
							<view :style="{color:fontcolor}" v-for="i of updateText.split('\n')" :key="i">
								{{i}}
							</view>
						</view>
						<view style="display: flex;justify-content: space-around;align-items: center;">
							<textarea rows="5" v-model="updateText" placeholder="请输入文字" class="textarea"
								always-embed="true" />
							<view class="colorbtn" @click="onClick" :style="{background:fontcolor}"></view>
						</view>


						<scroll-view scroll-y="true" class="scroll">
							<view class="scroll-list">
								<view class="item" @click="activeFontFamily = 'sans-serif';drawFont()">
									无字体
								</view>
								<view class="item" v-for="item of fontList" :key="item.id"
									@click="activeFontFamily = item.name;drawFont()" :style="{fontFamily:item.name}">
									<!-- {{item.name}} -->
									<image :src="item.icon" mode="aspectFit" :style="{opacity:item.name==activeFontFamily?0.3:1}"></image>
									<radio v-if="item.name==activeFontFamily" checked/>
								</view>
							</view>

						</scroll-view>
						<chj-color-picker @changecolor="changecolor" ref="chj-color-picker" @change="subColor"
							@cancel="cancel" :defaultColor="fontcolor">
						</chj-color-picker>
					</view>
					<view class="writearea" :class="{show:inputType!=2}">
						<canvas type="2d" canvas-id="handwritingCanvas" id="handwritingCanvas" class="write-canvas"
							ref="myCanvas" @touchstart="canvasTouchstart" @touchmove="canvasTouchmove"
							@touchend="canvasTouchend"></canvas>
						<view class="clear" @click="clearCanvas">
							清除
						</view>
					</view>
				</view>
				<view class="to-custom" @click="submitUserImage(activeCustomItem)">
					提交
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import {
		getExampleList,
		getStyleList,
		getCustomScrollList,
		getMaterialList,
		getShareInfo,
		getHistoryImages,
		getHistoryBgImages,
		deleteUserImage,
		generateCustomImage,
		generateTextImage,
		getSkuList,
		getFontList
	} from '@/api/custom.js';
	import {
		mapGetters
	} from 'vuex'
	import {
		uploadImage,
		uploadTextImage
	} from "@/utils/utils.js";
	import imageSwiper from '@/pages/example/components/image-swiper/image-swiper.vue'
	// if (process.env.NODE_ENV === 'development') {
	// 	import 'https://dev-1313492473.cos.ap-guangzhou.myqcloud.com/css/font.css'
	// } else {
	// 	import 'https://prod-1313492473.cos.ap-guangzhou.myqcloud.com/css/font.css'
	// }
	export default {
		components: {
			imageSwiper,
		},
		data() {
			return {
				list: [],
				phoneModelId: 1,
				stickerImageId: null,
				activeStyleList: [],
				activeMaterial: '',
				activeMaterialIndex: 0,
				activeMaterialName: '材质',
				materialListShow: false,
				activeCustomItem: {},
				styleList: [],
				materialList: [],
				current: 0,
				shareId: '',
				shareInfo: {},
				shareTips: false,
				showUserImage: false,
				updateText: '',
				historyImages: [],
				activeUserImageId: '',
				previewEnable: true,
				start: 0,
				client: null,
				listType: null,
				inputType: 1,
				ctx: null,
				lastPoint: null,
				isDrawing: false,
				// 字体
				activeFontFamily: 'sans-serif',
				fontList: [],
				canvas: null,
				showColor: false,
				fontcolor: '#000000'
			}
		},
		computed: {
			...mapGetters({
				defaultPhoneModelId: 'phoneModelId'
			}),
			// testsize() {
			// 	let length = this.updateText.split('\n').filter(item => {
			// 		return item != ''
			// 	}).length
			// 	return 80 / length < 50 ? 50 : 80 / length
			// },
			textarr() {
				return this.updateText.split('\n')
			},
			maxtest() {
				let text = ''
				this.updateText.split('\n').forEach(item => {
					text = item.length > text.length ? item : text
				})
				return text
			}
		},
		watch: {
			updateText(newValue, oldValue) {
				uni.$u.debounce(() => {
					this.drawFont()
				})

			}
		},
		methods: {
			onClick() {
				// this.showColor = true
				this.$refs['chj-color-picker'].open();
			},
			subColor({
				hex,
				rgba
			}) {
				// this.showColor = false
				this.fontcolor = hex
				console.log('确定');
				console.log(hex);
				console.log(rgba);
				this.drawFont()

			},
			changecolor(ne) {
				console.log('颜色变化', ne);
				this.fontcolor = ne
				if (this.updateText) {
					this.drawFont()
				}


			},
			cancel() {
				console.log('取消');
				// this.showColor = false

			},
			getList(e) {
				this.previewEnable = true
				this.shareTips = false
				if (e.detail.current == this.list.length - 1 && this.client == 'up') {
					this.getCustomScrollList(undefined, this.list[e.detail.current].stickerImageId)
				}
				if (e.detail.current == 0 && this.client == 'down') {
					this.getCustomScrollList(this.list[e.detail.current].stickerImageId)
				}
			},
			// 获取用户历史上传图片
			getHistoryImages() {
				getHistoryImages({
					pageSize: 50
				}).then(res => {
					this.historyImages = res.data
					if (this.historyImages.length > 0) {
						this.activeUserImageId = this.historyImages[0].id
					}
				})

			},
			swiperChange(e) {
				this.current = e.detail.current
				this.previewEnable = false
			},
			// 定制
			handleCustom(data) {
				if (this.listType == 0) {
					uni.navigateTo({
						url: '/pages/diy/diyPhoneCase'
					})
					return
				}
				this.showUserImage = true
				this.activeCustomItem = data
				// if (this.historyImages.length == 0) {
				// 	this.addUserImage()
				// }
			},
			handleClose() {
				this.showUserImage = false;
				this.updateText = '';
				this.clearCanvas();
				this.$refs['chj-color-picker'].cancel()
			},
			// 获取当页列表
			async getCustomScrollList(firstStickerImageId, lastStickerImageId) {
				if (!this.phoneModelId) return
				getCustomScrollList({
					firstStickerImageId,
					lastStickerImageId,
					stickerImageId: firstStickerImageId || lastStickerImageId ? '' : this.stickerImageId,
					materialMap: {
						10: this.activeMaterial,
						11: this.phoneModelId
					},
					type: this.listType,
					styleIds: this.activeStyleList,
					pageSize: 10,
				}).then(res => {
					let datas = res.data
					if (this.shareId) {
						datas = res.data.filter(item => {
							return item.id != this.shareInfo.id
						})
					}
					if (firstStickerImageId) {
						this.list = [...datas, ...this.list]
					} else if (lastStickerImageId) {
						this.list = [...this.list, ...datas]
					} else {
						if (this.shareId) {
							this.list = [this.shareInfo, ...datas]
						} else {
							this.list = res.data
						}
					}
					if (datas.length == 0) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						})
					}

				})
			},
			// 放大图片预览
			previewImage(index, list) {
				if (!this.previewEnable) return
				let arr = []
				list.forEach(item => {
					arr.push(item.imageUrl)
				})
				uni.previewImage({
					current: index,
					urls: arr
				});
			},
			// 获取风格列表
			getStyleList() {
				getStyleList({
					type: 2
				}).then(res => {
					this.styleList = res.data
				})
			},
			// 获取机壳列表
			async getMaterialList(phoneModelId) {
				const data = await getSkuList({
					materialMap: {
						11: phoneModelId || this.phoneModelId
					},
					pageSize: 50
				})
				this.$nextTick(() => {
					this.materialList = data.data
					let idx = this.materialList.findIndex(item => {
						return this.activeMaterial == item.materialMap[10]
					})
					idx = idx == -1 ? 0 : idx
					this.selectMaterial(this.materialList[idx], idx)
				})



			},
			// 获取分享的内容
			getShareInfo() {
				getShareInfo({
					shareRecordId: this.shareId
				}).then(res => {
					this.shareInfo = res.data
					this.phoneModelId = this.defaultPhoneModelId
					this.activeMaterial = this.shareInfo.materialId
					this.listType = this.shareInfo.stickerImageType
					uni.$u.debounce(() => {
						this.getCustomScrollList()
					})
					this.shareTips = true
				})
			},
			// 选择手机型号
			selectModel(data) {
				this.phoneModelId = data
				if (this.list[this.current]) {
					this.stickerImageId = this.list[this.current].stickerImageId
				}
				this.getMaterialList(data)
				uni.$u.debounce(() => {
					this.getCustomScrollList()
				})
			},
			// 选择材质
			selectMaterial(data, index) {
				// uni.setStorageSync('defaultMaterial', {
				// 	data,
				// 	index
				// })
				this.activeMaterial = data.materialMap[10]
				this.activeMaterialIndex = index
				if (this.materialList.length > 0) {
					this.activeMaterialName = this.materialList[index].name
				}
				this.materialListShow = false
				uni.$u.debounce(() => {
					this.getCustomScrollList()
				})
			},
			// 选择图片
			addUserImage() {
				const _this = this
				uni.chooseMedia({
					count: 1, // 最多可以选择的文件个数
					sourceType: ['album', 'camera'], // 从相册选择或是直接调起相机
					mediaType: ['image'], // 可以选定的文件类型
					camera: 'back', // 默认后置摄像头，front为前置摄像头
					success: function(res) {
						if (res.tempFiles[0].size > 10 * 1024 * 1024) {
							uni.showToast({
								title: "图片不能大于10M",
								icon: 'none',
								duration: 2000
							})
							return
						}
						uploadImage(res.tempFiles[0].tempFilePath, (resData) => {
							uni.showLoading({
								mask: true
							})
							let timer = setTimeout(() => {
								_this.getHistoryImages()
								_this.activeUserImageId = JSON.parse(resData.data).data
								uni.hideLoading()
							}, 2000)
						})
					},
					fail: function(err) {
						console.error('选择失败', err);
					}
				});
			},

			// 滑动选择历史图片
			changeImages(data) {
				this.activeUserImageId = data.id
			},
			// 删除用户上传图片
			deleteUserImage(data, index) {
				const _this = this
				uni.showModal({
					content: '确认要删除',
					success: function(res) {
						if (res.confirm) {
							deleteUserImage({
								id: data.id
							}).then(res => {
								_this.historyImages.splice(index, 1)
								_this.$refs.imageSwiper.setList(index)
							})
						}
					}
				});

			},
			// 提交定制
			submitUserImage(data) {
				uni.showLoading({
					mask: true
				})
				if (this.listType != 3) {
					if (!this.activeUserImageId) {
						uni.showToast({
							title: "请先选择图片",
							icon: 'none',
							duration: 2000
						})
						uni.hideLoading()
						return
					}
					generateCustomImage({
						userImageId: this.activeUserImageId,
						hasPhoneCase: true,
						stickerId: data.id,
					}).then(res => {
						this.showUserImage = false
						uni.hideLoading()
						uni.showToast({
							title: '已提交制作\n稍后可到我的定制页查看',
							icon: 'none'
						});
					})

				} else {
					if (!this.updateText) {
						uni.showToast({
							title: "请先输入文字",
							icon: 'none',
							duration: 2000
						})
						uni.hideLoading()
						return
					}
					// this.clearCanvas()
					uni.canvasToTempFilePath({
						// canvasId: 'handwritingCanvas',
						canvas: this.canvas,
						success: (res) => {
							console.log(res);
							let path = res.tempFilePath
							uploadTextImage(res.tempFilePath, {
								hasPhoneCase: 'true',
								stickerId: data.id,
								content: this.updateText,
								flag: this.activeFontFamily == 'sans-serif' ? 'none' : 'image'
							}, (res) => {
								uni.hideLoading()
								const data = JSON.parse(res.data)
								if (data.code == 2001) {
									uni.showToast({
										title: "当前算力不足，请充值",
										icon: 'none',
										duration: 2000
									})
									return
								}
								this.showUserImage = false
								this.updateText = ''
								this.clearCanvas()
								uni.showToast({
									title: '已提交制作\n稍后可到我的定制页查看',
									icon: 'none'
								});
							})
						},
						fail: (err) => {
							console.error('导出图片失败', err);
						}
					});
				}


			},
			touchstart(e) {
				this.start = e.changedTouches[0].clientY
			},
			touchend(e) {
				this.client = (this.start - e.changedTouches[0].clientY) > 0 ? 'up' : 'down'
			},

			// 画板触摸开始
			canvasTouchstart(e) {
				// this.ctx.setStrokeStyle('#000');
				this.ctx.fillStyle = this.fontcolor;
				this.ctx.strokeStyle = this.fontcolor
				// this.ctx.setLineWidth(3);
				const touch = e.touches[0];
				this.lastPoint = {
					x: touch.x,
					y: touch.y
				};
				this.isDrawing = true;
				this.ctx.beginPath()
			},
			// 画板触摸
			canvasTouchmove(e) {
				if (!this.isDrawing) return;
				const touch = e.touches[0];
				const newPoint = {
					x: touch.x,
					y: touch.y
				};
				this.drawLine(this.lastPoint, newPoint);
				// this.ctx.draw(true);
				this.lastPoint = newPoint;
			},
			// 画板触摸结束
			canvasTouchend(e) {
				this.isDrawing = false;
				// this.ctx.draw(true);
			},
			// 绘制线条
			drawLine(from, to) {
				const screenWidth = uni.getWindowInfo().screenWidth
				const pixel = 750 / screenWidth
				this.ctx.moveTo(from.x * pixel, from.y * pixel);
				this.ctx.lineTo(to.x * pixel, to.y * pixel);
				this.ctx.stroke();
			},
			// 清除画板
			clearCanvas() {
				this.ctx.clearRect(0, 0, 750, 750); // 假设 canvas 大小为 300x300，应根据实际情况调整
				// this.ctx.draw();
				this.lastPoint = null;
			},
			// 初始化画板
			initCanvas() {
				wx.createSelectorQuery()
					.select('#handwritingCanvas')
					.node(({
						node: canvas
					}) => {
						this.ctx = canvas.getContext('2d');
						this.canvas = canvas
						canvas.height = 682
						canvas.width = 682
						this.ctx.fillStyle = "#000";
						this.ctx.lineWidth = 6
						this.ctx.lineCap = 'round';
					}).exec();

			},
			// 获取字体列表
			getFontList() {
				if (this.listType != 3) return
				getFontList().then(res => {
					this.fontList = res.data
					// loadFontFace无法缓存字体，比较消耗流量
					this.fontList.forEach(item => {
						wx.loadFontFace({
							family: item.name,
							source: item.file,
							scopes: ["native", "webview"],
							success(res) {
								console.log(item.name, res);
							},
							fail(err) {
								console.log(item.name, err);
							}
						})
					})
				})
			},
			// 绘制文字canvas
			drawFont() {
				this.clearCanvas()
				let fontSize = 600 / this.textarr.length
				let fontSize1 = 600 / this.maxtest.length
				this.ctx.font = `${Math.floor(fontSize>fontSize1?fontSize1:fontSize)}px ${this.activeFontFamily}`;
				this.ctx.fillStyle = this.fontcolor
				this.ctx.textAlign = 'center';
				for (let i = 0; i < this.textarr.length; i++) {
					this.ctx.fillText(this.textarr[i], 341, Math.floor(fontSize > fontSize1 ? fontSize1 :
						fontSize) * (i + 1));
				}
			},
		},
		onLoad(e) {
			if (e.scene) {
				uni.setStorageSync('shareRecordId', e.scene)
				this.shareId = e.scene
				this.getShareInfo()
			} else {
				this.listType = e.type
				this.phoneModelId = e.phoneModelId
				this.stickerImageId = e.stickerImageId
				this.activeMaterial = e.activeMaterial
				this.activeStyleList = e.activeStyleList.split(',').filter(item => {
					return item != ''
				}).map(item => {
					return Number(item)
				})
			}

			this.getStyleList()
			this.getMaterialList()
			this.getHistoryImages()
			// this.getCustomScrollList()
			this.getFontList()
		},
		mounted() {

			this.initCanvas();
		},
		onHide() {}
	}
</script>

<style lang="scss">
	// @import '@/static/style/font-face.scss';

	.cases-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		// .colorpick {
		// 	position: absolute;
		// 	z-index: 9999;
		// }
		.material-content {
			display: flex;
			padding: 10rpx;
			background-color: #fff;
			position: relative;

			.phone-model {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				margin: 26rpx 35rpx 0;
				position: relative;
				color: #979797;
				flex-shrink: 0;

				.phone-select {
					display: inline-block;
					border-radius: 50rpx;
					border: 2rpx solid #333;
					padding: 0 17rpx;
					font-size: 26rpx;
					height: 50rpx;

					text {
						font-weight: bold;
						color: #333;
					}

					.text1 {
						margin-left: 17rpx;
						font-size: 20rpx;
					}
				}
			}

			.material-name {
				height: 100rpx;
				display: flex;
				flex-grow: 1;

				image {
					height: 100%;
					width: 100rpx;
					position: absolute;
				}

				text {
					font-size: 28rpx;
					margin: auto;
					margin-left: 100rpx;
				}

				.text1 {
					margin-left: 17rpx;
					font-size: 20rpx;
				}
			}

			.material-list {
				height: 300rpx;
				width: 100%;
				background-color: #fff;
				position: absolute;
				bottom: -300rpx;
				left: 0;
				z-index: 999;
				box-shadow: -1rpx 10rpx 17rpx -7rpx #666;

				.material-scroll {
					display: flex;

					.material-item {
						height: 280rpx;
						width: 25vw;
						background-color: #fff;
						border-radius: 17rpx;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						position: relative;
						margin-right: 30rpx;
						text-align: center;
						flex-shrink: 0;

						&.active {
							opacity: 0.7;

							.radio {
								position: absolute;
								right: 17rpx;
								top: 17rpx;
								z-index: 1;
							}
						}

						.image {
							width: 100%;
							height: 280rpx;
							background: #fff;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
							}
						}

						.title {
							font-size: 24rpx;
							margin: 17rpx;
							flex-shrink: 0;
							flex-grow: 0;
							height: 50rpx;
						}

						.item-btn {
							height: 65.8rpx;
							border-radius: 17rpx;
							font-size: 30rpx;
							box-sizing: border-box;
							text-align: center;
							line-height: 62.8rpx;
							background-color: #333;
							color: #fff;
							margin: 17rpx;
						}
					}
				}

			}
		}

		.list-swiper {
			flex-grow: 1;

			.list-swiper-item {
				height: calc(100% - 50rpx);
				background-color: #fff;
				border-radius: 50rpx;
				margin: 20rpx 20rpx;
				box-shadow: 0rpx 1rpx 11rpx 2rpx #ccc;
				overflow: hidden;

				.img-swiper {
					height: calc(100% - 240rpx);
					background-color: #eee;
					transition: height 0.5s;

					.img-swiper-item {
						height: 100%;
						width: 100%;
					}

					.bg {
						height: 100%;
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
						filter: blur(12px);
					}
				}

				.to-custom {
					width: 281rpx;
					height: 78.8rpx;
					border-radius: 78rpx;
					font-size: 35rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 78.8rpx;
					margin: 80rpx auto;
					background-color: #333;
					color: #fff;
				}
			}

			&.animate {
				transition: transform 1s cubic-bezier(.62, -0.14, .62, 1.25);
				animation: down1 1s 2s;
			}

		}

		.swiper-tips {
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translate(-50%, 0);
			transition: transform 1s cubic-bezier(.62, -0.14, .62, 1.25);
			color: #666;
			animation: down 1s 2s;
		}

		@keyframes down {
			0% {
				transform: translate(-50%, 0);
			}

			50% {
				transform: translate(-50%, -70rpx);
			}

			100% {
				transform: translate(-50%, 0);
			}
		}

		@keyframes down1 {
			0% {
				transform: translate(0, 0);
			}

			50% {
				transform: translate(0, -70rpx);
			}

			100% {
				transform: translate(0, 0);
			}
		}
	}

	.upload {
		position: relative;
		overflow: hidden;

		.upload-img {
			height: 350rpx;
			width: 350rpx;
			background-color: #D8D8D8;
			color: #fff;
			text-align: center;
			font-size: 38rpx;
			font-weight: bold;
			padding-top: 115rpx;
			margin: auto;
		}

		.upload-img2 {
			width: 85rpx;
			height: 75rpx;
			position: absolute;
			left: 20rpx;
			bottom: 35rpx;
			overflow: unset;

			&::after {
				content: '添加图片';
				color: #333;
				font-weight: bold;
				white-space: nowrap;
			}
		}

		.left {
			position: absolute;
			height: 42rpx;
			width: 42rpx;
			top: 50%;
			left: 26rpx;
			transform: translateY(-50%) rotate(180deg);

			.icon {
				height: 100%;
				width: 100%;
			}
		}

		.right {
			position: absolute;
			height: 42rpx;
			width: 42rpx;
			top: 50%;
			right: 26rpx;
			transform: translateY(-50%);

			.icon {
				height: 100%;
				width: 100%;
			}
		}

		.tabs {
			display: flex;
			margin: 0 17rpx 17rpx;
			color: #999;

			.tab {
				font-size: 35rpx;
				margin: 0 17rpx;

				&.active {
					font-weight: bold;
					color: #333;
				}
			}
		}

		.label {
			width: 86rpx;
			display: inline-block;
			margin-left: 34rpx;
			font-size: 28rpx;
			line-height: 100rpx;
			vertical-align: top;
		}

		.preview {
			width: calc(100% - 34rpx);
			margin-bottom: 10rpx;
			border-radius: 17rpx;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			display: inline-block;
			font-size: 170rpx;
			text-align: center;
			overflow: auto;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 1;
			max-height: 350rpx;
			min-height: 173rpx;
		}

		.colorbtn {
			width: 50rpx;
			height: 50rpx;
			margin-right: 34rpx;
		}

		.scroll {
			height: 426rpx;
			margin: 17rpx 34rpx;
			width: calc(100% - 68rpx);
			border: 1rpx solid #ccc;
			// border-radius: 17rpx;

			.scroll-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 10rpx;
				margin: 10rpx;

				.item {
					border: 1rpx solid #ccc;
					height: 100rpx;
					font-size: 38rpx;
					text-align: center;
					line-height: 100rpx;
					position: relative;
					image {
						height: 100%;
						width: 100%;
					}

					radio {
						position: absolute;
						top: 0;
						left: calc(50% - 19rpx);
					}
				}
			}

		}

		.textarea {
			margin: 0 34rpx;
			border: 1rpx solid #ccc;
			border-radius: 17rpx;
			padding: 16rpx 23rpx;
			width: calc(100% - 68rpx);
			font-size: 33rpx;
			box-sizing: border-box;
			height: 100rpx;
		}

		.writearea {
			margin: 0 34rpx;
			border: 1rpx solid #ccc;
			border-radius: 17rpx;
			width: 682rpx;
			height: 682rpx;

			&.show {
				position: absolute;
				bottom: -1000rpx;
			}

			.write-canvas {
				width: 682rpx;
				height: 682rpx;
			}

			.clear {
				position: absolute;
				bottom: 17rpx;
				right: 51rpx;
				font-size: 34rpx;
				padding: 17rpx;
			}
		}
	}

	.to-custom {
		width: 281rpx;
		height: 78.8rpx;
		border-radius: 78rpx;
		font-size: 35rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 78.8rpx;
		margin: 80rpx auto 20rpx;
		background-color: #333;
		color: #fff;
	}
</style>